

import { _rect } from "./rect.js"
import { _circle } from "./circle.js"
import { _polygon } from './polygon.js'
import { _axis } from './axis.js'


const canvasFnMap = {
  circle: _circle,
  rect: _rect,
  polygon: _polygon
}

export const _canvas = (options = {}, props) => {
  let {
    width = 800,
    height = 600,
    shapes,
    axis
  } = options
  let canvas = document.createElement('canvas')
  let ctx = canvas.getContext("2d")
  canvas.width = width
  canvas.height = height

  let fn = (t) => {
    let {

      shape
    } = t

    canvasFnMap[shape] && canvasFnMap[shape](ctx, {
      ...t
    }, {
      stroke: 'blue',
      fill: 'none',
      ...t.props,
      ...props
    })

  }

  if (axis) {
    _axis(ctx, axis)
  }


  shapes.forEach(t => fn(t))

  return canvas
}